<template>
	<view class="content">
		<view class="header">
		  <view class="image">
		    <image src="../../static/header-image.png" mode=""></image>
        <view class="logo">
          <image src="../../static/logo.png" mode=""></image>
        </view>
		  </view>
      <view class="body">
        <view class="title">
          赣州华启科技有限公司
        </view>
        <view class="type">
          <text>501-2000人</text><text>人力资源服务</text>
        </view>
        <view class="info">
          一站式招聘服务，给企业带省时省力的高效率高质量的招聘效果！
          <text>...查看详情</text>
        </view>
      </view>
		</view>
    
    <view class="list_title">
      在招职位
    </view>
    
    <!-- 招聘列表 -->
    <view class="list">
      <view class="list_item" v-for="item in list" :key = item.id>
        <view class="title">
          <view class="tit">
            {{item.title}}
          </view>
          <view class="monthly">
            {{item.monthly}}元/月
          </view>
        </view>
        <view class="position">
          <view class="position_l">
            {{item.restrain[0]}} | {{item.restrain[1]}} | {{item.restrain[2]}}
          </view>
          <view class="position_r">
            {{item.date}}
          </view>
        </view>
        <view class="treatment">
          <text v-for="(t_item, index) in item.treatment" :key = index>{{t_item}}</text>
        </view>
        <view class="comName">
          {{item.comName}}
        </view>
      </view>
       
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
          {
            id:1,
            title: '服务员',
            monthly: '3500~4500',
            restrain: ['赣州', '经验不限', '学历不限'],
            date: '12月5日',
            treatment: ['五险一金', '五险一金', '包吃', '包住', '节假日', '包住', '节假日', '包住', '节假日'],
            comName:'赣州市大龙燚火锅店'
          },
          {
            id:2,
            title: '服务员',
            monthly: '3500~4500',
            restrain: ['赣州', '经验不限', '学历不限'],
            date: '12月5日',
            treatment: ['五险一金', '五险一金', '包吃', '包住', '节假日'],
            comName:'赣州市大龙燚火锅店'
          },
          {
            id:3,
            title: '服务员',
            monthly: '3500~4500',
            restrain: ['赣州', '经验不限', '学历不限'],
            date: '12月5日',
            treatment: ['五险一金', '五险一金', '包吃', '包住', '节假日'],
            comName:'赣州市大龙燚火锅店'
          },
          {
            id:4,
            title: '服务员',
            monthly: '3500~4500',
            restrain: ['赣州', '经验不限', '学历不限'],
            date: '12月5日',
            treatment: ['五险一金', '五险一金', '包吃', '包住', '节假日'],
            comName:'赣州市大龙燚火锅店'
          },
          {
            id:5,
            title: '服务员',
            monthly: '3500~4500',
            restrain: ['赣州', '经验不限', '学历不限'],
            date: '12月5日',
            treatment: ['五险一金', '五险一金', '包吃', '包住', '节假日'],
            comName:'赣州市大龙燚火锅店'
          },
          {
            id:6,
            title: '服务员',
            monthly: '3500~4500',
            restrain: ['赣州', '经验不限', '学历不限'],
            date: '12月5日',
            treatment: ['五险一金', '五险一金', '包吃', '包住', '节假日'],
            comName:'赣州市大龙燚火锅店'
          }
        ]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.content {
    background-color: #EFEFF4;
    .header {
      background-color: #fff;
      position: relative;
      .image{
        width: 750rpx;
        height: 240rpx;
        image {
          width: 100%;
          height: 100%;
        }
        .logo{
          position: absolute;
          left: 30rpx;
          top: 180rpx;
          width: 120rpx;
          height: 120rpx;
          image {
            width: 100%;
            height: 100%; 
          }
        }
      }
      .body {
        width: 674rpx;
        margin: 100rpx auto 0;
        .title {
          font-size: 40rpx;
          color: #333333;
        }
          
        .type {
          margin-top: 20rpx;
          color: #626262;
          font-size: 24rpx;
          text {
            display: inline-block;
            height: 50rpx;
            line-height: 50rpx;
            padding:0 16rpx;
            background-color: #F7F7F7;
            margin-right: 34rpx;
          }
        }
        
        .info {
          font-size: 28rpx;
          margin-top: 26rpx;
          padding-bottom: 35rpx;
          color: #808080;
          text{
            color: #007AFF;
          }
        }
      }
    }
    
    .list_title {
      height: 70rpx;
      background-color: #fff;
      margin-top: 16rpx;
      text-align: center;
      font-size: 32rpx;
      line-height: 70rpx;
      color: #333;
    }
    
    // 招聘列表
    .list {
      margin-top: 2rpx;
      .list_item {
        width: 750rpx;
        padding: 0 22rpx 0 36rpx;
        background-color: #FFFFFF;
        margin-bottom: 10rpx;
        .title {
          box-sizing: content-box;
          padding: 30rpx 0 21rpx 0;
          line-height: 43rpx;
          display: flex;
          justify-content: space-between;
          font-weight:500;
          .tit {
            font-size: 34rpx;
            color: #333;
            flex:2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .monthly {
            font-size: 28rpx;
            color: #FF0B00;
            flex:1;
          }
        }
        
        .position {
          display: flex;
          justify-content: space-between;
          // height: 25rpx;
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 20rpx;
        }
        
        .treatment {
          font-size: 26rpx;
          line-height: 50rpx;
          text {
            margin-right: 20rpx;
            color: #549FD9;
            border: 1px solid #549FD9;
          }
        }
        .comName {
          padding: 29rpx 0 24rpx 0;
          font-size:26rpx;
          color: #333333;
        }
      }
      .list_item:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>
